let code = {
    code1:`
    <mo-scrollbar height="400px">
        <p v-for="item in 20" :key="item" class="scrollbar-item">{{ item }}</p>
    </mo-scrollbar>

    <style>
    .scrollbar-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin: 10px;
        text-align: center;
        border-radius: 4px;
        background: #ffecec;
        color: #ff8740;
    }
    </style>
    `,
    code2:`
    <mo-scrollbar>
        <div style="display:flex">
            <p v-for="item in 30" :key="item" class="scrollbar-item1">{{ item }}</p>
        </div>
    </mo-scrollbar>

    <style>
    .scrollbar-item1 {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        height: 50px;
        margin: 10px;
        text-align: center;
        border-radius: 4px;
        background: #ffe9f5;
        color: #ff8740;
    }
    </style>
    `,
    code3:`
    <div style="margin:0 0 10px 10px">
        <mo-button type="success" @click="addItem">添加</mo-button>
        <mo-button type="error" @click="deleteItem" style="margin-left:10px">删除</mo-button>
    </div>
    <div class="flex-start">
        <mo-scrollbar maxHeight="400px">
            <p v-for="item in TestArr" :key="item" class="scrollbar-item">{{ item }}</p>
        </mo-scrollbar>
    </div>
    <style>
    .scrollbar-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin: 10px;
        text-align: center;
        border-radius: 4px;
        background: #ffecec;
        color: #ff8740;
    }
    </style>
    `
};

export default code;